import './mapMaker.less'
import { EnvironmentFilled } from '@ant-design/icons'
import { get } from '../../axios/index'
import { useState, useEffect } from 'react'
import { Popover } from 'antd';

function MapMaker(props) {
    const [cabinetList, setCabinetList] = useState([])
    useEffect(() => {
        get("/ck_electrical/api/listAllCabinet").then(res => {
            if(res.data.status === '200'){
                setCabinetList(res.data.data)
            }
        }).catch(error => {
            console.error(error)
        })
    }, [])

    function setPosition(cabinet) {
        return {
            left: cabinet.locationX + 20.7 + 'px',
            top: cabinet.locationY + 50 + 'px'
        }
    }
    const content = function(list) {
        return <div className='map-maker-popover-cont'>
            {
                list.map((item, index) => <p className={index < list.length - 1 ? 'bor-b' : ''} key={item.id}>{item.serialNumber}</p>)
            }
        </div>
    }
    return <div className='map-maker'>
        {
            cabinetList.map(cabinet => {
                
                return <Popover overlayClassName='map-maker-popover' content={content(cabinet.facilityList)} key={cabinet.id}>
                    <EnvironmentFilled className='icon' style={setPosition(cabinet)} onClick={() => props.onSign(cabinet.facilityList)} />
                </Popover>
            })
        }
        {/* <EnvironmentFilled className='icon red' /> */}
    </div>
}

export default MapMaker